<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
</script>

<template>
  <view class="appointment flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto pb-40">
      <view class="page-title mt-63">
        预约详情
      </view>

      <view class="appoint-list px-48">
        <view>
          项目详情
        </view>

        <view>
          项目子项
        </view>

        <view>
          预约凭证
        </view>

        <view class="flex-center">
          <view class="confirm-btn">
            <wd-button block>
              打印凭证
            </wd-button>
          </view>
          <view class="confirm-btn mx-20">
            <wd-button block>
              重新预约
            </wd-button>
          </view>
          <view class="confirm-btn">
            <wd-button block>
              取消预约
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '预约明细',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.appointment {
  background-color: var(--bg-color);
  height: 100%;

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .confirm-btn {
    width: 300px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 59px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
